<template>

	<view class="">
		<view class="bgWhite plr-24 pt-20 pb-40 radius-16" v-if="type == 'a'">

			<view v-if="type === 'a'" class="flex">

				<view class="" @click.stop="handleUse(1)">
					<!-- 		portraitImg:"",
					clothingImg:"", -->
					<view class="bgMinor hidden renClass radius-16 center"
						style="width: 250rpx; height: 333rpx;position: relative;">
						<!-- <view class=" ">
							<uv-icon name="plus" color="#E1E1E1" size="56rpx" bold></uv-icon>
						</view> -->
						<img v-if="dataInfo.portraitImg !=''" @click.stop="deleteImage('portraitImg')"
							src="@/static/images/del.png" style="cursor: pointer;position: absolute; top: 6px;
						z-index: 32 !important;
						right:   6px;width: 20px;height: 20px; ">
						<img mode="aspectFit" v-if="dataInfo.portraitImg !=''"
							style=" max-width: 100%;max-height: 100%;" :src="dataInfo.portraitImg"></img>
						<view v-if="dataInfo.portraitImg ==''" class=" "
							style="display: flex;flex-direction: column; align-items: center;">
							<uv-icon name="plus" color="rgb(0,125,245)" size="56rpx" bold></uv-icon>
						</view>
					</view>
					<view class="tc mt-24 lineHeight1 size-34">人像</view>
				</view>
				<view class="">
					<uv-image src="/static/images/zhuanhuan.png" width="47rpx" height="38rpx"></uv-image>
				</view>
				<view class="" @click.stop="handleUse(2)">
					<view class="bgMinor hidden renClass radius-16 center"
						style="width: 250rpx; height: 333rpx;position: relative;">
						<!-- <view class=" ">
							<uv-icon name="plus" color="#E1E1E1" size="56rpx" bold></uv-icon>
						</view> -->

						<img v-if="dataInfo.clothingImg !=''" @click.stop="deleteImage('clothingImg')"
							src="@/static/images/del.png" style="cursor: pointer;position: absolute; top: 6px;
						z-index: 32 !important;
						right:  6px;width: 20px;height: 20px;">
						<img v-if="dataInfo.clothingImg !=''" mode="aspectFit"
							style=" max-width: 100%;max-height: 100%;" :src="dataInfo.clothingImg"></img>
						<view v-if="dataInfo.clothingImg ==''" class=" "
							style="display: flex;flex-direction: column; align-items: center;">
							<uv-icon name="plus" color="rgb(0,125,245)" size="56rpx" bold></uv-icon>

						</view>
					</view>
					<view class="tc mt-24 lineHeight1 size-34">服装</view>
				</view>
			</view>
		</view>
		<view class=" plr-24 pt-0 pb-0 radius-16" v-if="type === 'b'"
			style="display: flex;justify-content: center;overflow: hidden;">
			<view class="center radius-16" style="background: #ffffff;width:75%;overflow: hidden;" @click="uploadImage">

				<view class="radius-16 center" style="width:100%; height: 633rpx;padding: 0;position: relative;">
					<img v-if="dataInfo.referImg" @click.stop="dataInfo.referImg = ''" src="@/static/images/del.png"
						style="cursor: pointer;position: absolute; top: 6px;
					z-index: 32 !important;
					right:   6px;width: 20px;height: 20px;">
					<img v-if="dataInfo.referImg !=''  &&dataInfo.referImg != null" mode="aspectFit"
						style="width: 100%;height: 633rpx !important" :src="dataInfo.referImg"></img>
					<view v-if="dataInfo.referImg =='' ||dataInfo.referImg == null" class=" "
						style="display: flex;flex-direction: column; align-items: center;">
						<uv-icon name="plus" color="rgb(0,125,245)" size="56rpx" bold></uv-icon>
						<view class="tc mt-24 lineHeight1 size-34" style="color: rgb(153, 153, 153);">上传参考图</view>
					</view>
				</view>
				<view></view>
			</view>
		</view>



		<view class="bgWhite  pt-4  radius-16" v-if="type != 'b' &&type != 'a'">
			<uv-textarea v-model="dataInfo.remark" placeholder="描述你想要创作的内容..." :maxlength="-1" border="none"
				:customStyle="{ background: '#ffffff', borderRadius: '16rpx', }"
				:placeholderStyle="{ color: 'rgb(193,193,193)', opacity: '0.3', fontSize: '24rpx' }"></uv-textarea>
		</view>
		<view class="" v-if="type != 'b' &&type != 'a'">
			<view class="">
				<view class="flex1 flex-wrap">
					<view @click.stop="handleImagination()" :class="{ xgItemOn: dataInfo.Imagination }"
						class="border-d2 radius-9 mt-19 mr-16  size-24 xgItemClassImagination pointer"
						style="margin-bottom: 19rpx;">
						<view>文案想象</view>
					</view>
				</view>
			</view>
		</view>
		<view
			style="width: 100%;height: 120rpx;border-radius: 20rpx 20rpx 0px 0px ;background: #ffffff; margin-top: 20rpx;position: relative;top: 20rpx;"
			v-if="type === 'b'">
			<textarea v-model="dataInfo.remark" placeholder="描述你想要生成的效果..." :maxlength="-1" border="none"
				:customStyle="{ background: '#ffffff', borderRadius: '16rpx 16rpx  0 0 ', height:'50rpx',width:'100%' }"
				style="padding: 7px;height:35px !important;font-size: 12px;"
				:placeholderStyle="{ color: 'rgb(193,193,193)', opacity: '0.3', fontSize: '14rpx', height:'50rpx',width:'100%'   }"></textarea>
			<view style="height: 3rpx;width: 100%;background-color: #ccc;z-index: 9;position: relative;top:15rpx;">
			</view>
		</view>
		<view class="bgWhite mt-24 plr-24 pt-10 pb-40 radius-16" v-if="type === 'b' || type === 'c'"
			:style="{marginTop:type === 'b' ?0:'20rpx'}">
			<!-- style=" box-shadow: -5px -1px 10px 0px rgba(0, 0, 0, 0.1);z-index: 20;border-radius:  0 0 16rpx 16rpx; " -->
			<view class="" v-if="type != 'b' &&type != 'a'">
				<view class="size-34 weight-5">图片比例</view>
				<view class="">
					<view class="flex1 flex-wrap">
						<view v-for="(item, index) in dataInfo.proportion" :key="index" @click.stop="handleRatio(index)"
							:class="{ xgItemOnfgItemClass: item.click }"
							class="flex1 flex-middle pointer border-d2 radius-9 mt-24 ml-6 plr-10 ptb-5 mr-6"
							style="border:1rpx solid #ccc">
							<view :style="{ border: item.click?'border:3rpx solid #fff':'border:3rpx solid #000' }"
								v-if="index == 0" class="border-d radius-5" style="width: 20rpx; height: 35rpx ;">
							</view>
							<view :style="{ border: item.click?'border:3rpx solid #fff':'border:3rpx solid #000' }"
								v-if="index == 1" class="border-d radius-5" style="width: 25rpx; height: 30rpx;">
							</view>
							<view :style="{ border: item.click?'border:3rpx solid #fff':'border:3rpx solid #000' }"
								v-if="index == 2" class="border-d radius-5" style="width: 30rpx; height: 34rpx;">
							</view>
							<view :style="{ border: item.click?'border:3rpx solid #fff':'border:3rpx solid #000' }"
								v-if="index == 3" class="border-d radius-5" style="width: 35rpx; height: 25rpx">
							</view>
							<view :style="{ border: item.click?'border:3rpx solid #fff':'border:3rpx solid #000' }"
								v-if="index == 4" class="border-d radius-5" style="width: 35rpx; height: 23rpx;">
							</view>
							<view class="ml-10">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="type === 'b' || type === 'c'" class="mt-40 gundongtiao">
				<view class="size-34 weight-5">风格</view>
				<view class="">
					<view class="">
						<view class="flex1 XScroll">
							<view v-for="(item, index) in dataInfo.style" :key="index" @click.stop="handleStyle(index)"
								:class="{ xgItemOn: item.click }" class="mt-24 mr-16 fgItemClass pointer relative">
								<!-- bgMinor -->
								<view class="flex">
									<uv-image :src="  item.content" width="230rpx" height="306rpx"
										radius="8px"></uv-image>
								</view>
								<!-- <view class=" fgXuanzhong" style="top: 70%;left: 35%;color: #fff;">
									{{item.remark}}
								</view> -->
								<view v-if="dataInfo.fgIndex == index" class="fgXuanzhong">
									<uv-image src="/static/images/xuanzhong.png" width="21px" height="21px"
										radius="8px"></uv-image>
								</view>



							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="type === 'c'" class="mt-40">

				<view class="size-34 weight-5">效果</view>
				<view class="">
					<view class="mt-24 size-24 color-black3">镜头视角</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.angle" :key="index" @click.stop="handleResult(index)"
								:class="{ xgItemOn: item.click }"
								class="border-d2 radius-9 mt-15 mr-16 size-26 xgItemClass pointer">
								<view>{{ item.content }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="mt-24 size-24 color-black3">人像</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.portrait" :key="index"
								@click.stop="handlePortrait(index)" :class="{ xgItemOn: item.click }"
								class="border-d2 radius-9 mt-15 mr-16 size-26 xgItemClass pointer">
								<view>{{ item.content }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<view class="mt-24 size-24 color-black3">光线</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.light" :key="index"
								@click.stop="handleRayLight(index)" :class="{ xgItemOn: item.click }"
								class="border-d2 radius-9 mt-15 mr-16 size-26 xgItemClass pointer">
								<view>{{ item.content }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<view class="mt-24 size-24 color-black3">背景</view>
					<view class="">
						<view class="flex1 flex-wrap">
							<view v-for="(item, index) in dataInfo.background" :key="index"
								@click.stop="handleSetting(index)" :class="{ xgItemOn: item.click }"
								class="border-d2 radius-9 mt-15 mr-16 size-26 xgItemClass pointer">
								<view>{{ item.content }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="color: rgb(144, 144, 144);margin-top: 30rpx;" v-if="type === 'a'">
			<view style="margin-top: 30rpx;">用户需知 </view>
			<view style="margin-top: 20rpx;">上传人像中的服装款式尽可能和上传服装的款式保持一致，以达到最理想的效果。 </view>
			<view style="margin-top: 20rpx;">上传宠物图片和服装的角度尽可能保持一致。 </view>
			<view style="margin-top: 20rpx;">禁止合成违规图片。 </view>
		</view>
		<view v-if="type === 'a'" style="height: 500rpx;display: flex;justify-content: center;align-items: center;">
			<img src="/static/images/logo2.png" style="width: 200rpx;height: 160rpx;" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { baseURL } from '@/utils/config.ts';
	import { reactive, ref, onMounted, watch } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { getWindowHeight } from '@/pages/util/getHeight';
	import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
	import useLoginStore from '@/pinia-store/userInfoStore';
	import { get, post, baseConfig } from '../../../utils/request';
	import axios from "axios"
	const useLogin = useLoginStore();
	const emit = defineEmits(['fOpen', 'deleteImage'])
	// console.log('useLoginuseLogin',useLogin);
	/* const props = defineProps({
		title: {
			type: String,
			default: "",
		},
		modalList: {
			type: Array,
			default: () => [],
		},
	}); */
	const { type, id, isShouw } = withDefaults(
		defineProps<{
			type : String;
			id : any;
			isShouw : String
			// info: Array<T>;
		}>(),
		{
			type: () => 'b',
			id: () => '',
			isShouw: () => '',
			// portraitImg: () => '',
			// clothingImg: () => '',
			// 默认值 a一键换装 b个性定制
			// info: () => null // 复杂数据类型使用函数返回的方式
		}
	);
	/** @name 数据 */
	const dataInfo = reactive({
		ratioIndex: 1,
		fgIndex: -1,
		handleindex: null,
		Imagination: false,
		effectIndex: [],
		proportion: [],
		light: [],
		background: [],
		angle: [],
		portrait: [],
		style: [],
		remark: '',
		referImg: '',
		portraitImg: "",
		clothingImg: "",
		imaginestate: "",
		ids: '',
	});

	function setClickStatus(responseResult : { [x : string] : any; }, dataInfoArray : any[], key : string) {
		if (responseResult && responseResult[key]) {
			const value = responseResult[key];
			const valueArray = Array.isArray(value) ? value : value.split(',');
			dataInfoArray.forEach(item => {
				item.click = valueArray.includes(item.code);
			});
		}
	}

	//选择同款调跳过来的
	const getDetailsDataFun = async (id,) => {
		// let id = 
		dataInfo.ids = id

		console.log("选择同款调跳过来的" + id)
		try {
			const response = await get<{
				result(result : any, arg1 : any, key : string) : unknown;
				id : String
			}>('/customized/getDetailsData', { id: id });
			if (response.code == 200) {

				dataInfo.remark = response.result.characters
				if (dataInfo.ids) {
					dataInfo.portraitImg = response.result.imgUrl
					// dataInfo.clothingImg = response.result.avatar
				}

				dataInfo.referImg = response.result.imgUrl
				// 设置图片比例选中状态
				if (type == 'c') {
					const keys = ['style', 'angle', 'portrait', 'light', 'background', 'proportion', 'imgUrl'];

					// style

					keys.forEach(key => {
						setClickStatus(response.result, dataInfo[key], key);
						console.log("我的type是多少" + type)
					});
				}

				// 	if (response && response.result) {
				// 	    const proportionValue = response.result.proportion;
				// 	    const proportionArray = proportionValue.split(',');
				// 	    dataInfo.proportion.forEach((item) => {
				// 	        item.click = proportionArray.includes(item.code);
				// 	    });
				// 	}



				// 	// 设置风格选中状态
				// 	const styleCode = response.result.style;
				// 	dataInfo.style.forEach(item => {
				// 		item.click = item.code === styleCode;
				// 	});

				// 	// 设置镜头视角选中状态
				// 	const angleCode = response.result.angle;
				// 	dataInfo.angle.forEach(item => {
				// 		item.click = item.code === angleCode;
				// 	});

				// 	// 设置人像选中状态
				// 	const portraitCode = response.result.portrait;
				// 	dataInfo.portrait.forEach(item => {
				// 		item.click = item.code === portraitCode;
				// 	});

				// 	// 设置光线选中状态
				// 	const lightCode = response.result.light;
				// 	dataInfo.light.forEach(item => {
				// 		item.click = item.code === lightCode;
				// 	});

				// 	// 设置背景选中状态
				// 	const backgroundCode = response.result.background;
				// 	dataInfo.background.forEach(item => {
				// 		item.click = item.code === backgroundCode;
				// 	});



				// dataInfo.remark = response.result.characters;



				// dataInfo.remark = response.result.characters
				// dataInfo.pages = response.result.pages
				// dataInfo.total = response.result.total
			}
		} catch (error) {
			console.error(error);
		}
	};
	function deleteImage(imageType : string) {
		dataInfo[imageType] = ''; // 清空当前组件中的图片路径
		emit('deleteImage', imageType); // 触发自定义事件通知父组件
	}
	/** @name 文案想象 */
	function handleImagination(index : number) {
		console.log('比例事件index', index);
		dataInfo.Imagination = !dataInfo.Imagination;
	}
	/** @name 图片比例事件 */
	function handleRatio(index : number) {
		console.log('比例事件index', index);
		if (dataInfo.proportion[index].click) {

			dataInfo.proportion[index].click = false
		} else {
			dataInfo.proportion.forEach(item => item.click = false)
			dataInfo.proportion[index].click = !dataInfo.proportion[index].click
		}


	}

	/** @name 风格事件 */
	function handleStyle(index : number) {
		if (dataInfo.style[index].click) {
			dataInfo.style[index].click = false;
			dataInfo.fgIndex = -1;
		} else {
			dataInfo.style.forEach(item => item.click = false)
			dataInfo.style[index].click = true;
			dataInfo.fgIndex = index;

		}

	}
	/** @name 效果 */
	function handleResult(index : number) {
		dataInfo.angle[index].click = !dataInfo.angle[index].click
	}
	/** @name 光线 */
	function handleRayLight(index : number) {
		dataInfo.light[index].click = !dataInfo.light[index].click
		dataInfo.handleindex = index;
	}
	/** @name 人像 */
	function handlePortrait(index : number) {
		dataInfo.portrait[index].click = !dataInfo.portrait[index].click
	}
	/** @name 背景 */
	function handleSetting(index : number) {
		dataInfo.background[index].click = !dataInfo.background[index].click
	}

	function getSelectedValues() {



		const characters = dataInfo.remark;
		const referImg = dataInfo.referImg
		const proportion = dataInfo.proportion.filter(item => item.click).map(item => item.code);
		const style = dataInfo.style.filter(item => item.click).map(item => item.code);
		const angle = dataInfo.angle.filter(item => item.click).map(item => item.code);
		const portrait = dataInfo.portrait.filter(item => item.click).map(item => item.code);
		const light = dataInfo.light.filter(item => item.click).map(item => item.code);
		const background = dataInfo.background.filter(item => item.click).map(item => item.code);
		const type = ''



		return {
			characters: characters,
			proportion: proportion.length > 0 ? proportion.join(',') : '',
			style: style.length > 0 ? style.join(',') : '',
			angle: angle.length > 0 ? angle.join(',') : '',
			portrait: portrait.length > 0 ? portrait.join(',') : '',
			light: light.length > 0 ? light.join(',') : '',
			background: background.length > 0 ? background.join(',') : '',
			type: type,
			referImg: referImg,
			// 1 #文案想象 1关2开

			imagineState: dataInfo.Imagination == true ? '2' : '1'
		};
	}
	const updateImage = (type : string, value : string) => {
		if (type === 'portraitImg') {
			dataInfo.portraitImg = value;
		} else if (type === 'clothingImg') {
			dataInfo.clothingImg = value;
		}
	};
	defineExpose({
		getSelectedValues,
		updateImage,
		fetchData,
		getDetailsDataFun
	});

	/** @name 使用 */
	async function handleUse(index : number) {
		console.log('使用');
		emit('fOpen', {
			msg: index,
		})
		// popupUseRef.value?.open();

	}

	const fetchData = async () => {
		try {
			const response = await get<{
				proportion : any[];
				result : any;
				message : string
			}>('setting/list');

			console.log(type + '----------')

			dataInfo.proportion = response.result.proportion
			dataInfo.light = response.result.special.light
			dataInfo.background = response.result.special.background
			dataInfo.angle = response.result.special.angle
			dataInfo.portrait = response.result.special.portrait
			dataInfo.style = type == 'c' ? response.result.style : response.result.tstStyle
			console.log(response.result);
		} catch (error) {
			console.error(error);
		}
	};
	// http://8.138.81.159:5301/ai/sys/common/upload

	// console.log(process.env.VUE_APP_HTTP_BASE_URL)

	async function uploadImage() {

		uni.chooseImage({
			count: 1, // 默认9
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: (res) => {
				console.log('上传文件')
				console.log(res.tempFiles)
				uni.uploadFile({
					url: baseConfig.baseURL + '/sys/common/upload', // 替换为实际的上传接口地址
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'X-Access-Token': uni.getStorageSync('Token')
					},
					formData: {
						// 这里可以添加其他表单数据
						file: res.tempFiles[0],
					},
					success: (uploadRes) => {
						let data = JSON.parse(uploadRes.data)
						dataInfo.referImg = data.message
						console.log(dataInfo.referImg)
						console.log('上传成功', data);
					},
					fail: (err) => {
						console.error('上传失败', err);
					}
				});
			}
		});
	}

	onShow((options : any) => {


	});
	onLoad((options : any) => {
		if (options.id) {
			dataInfo.ids = options.id
		}
		dataInfo.isShouw = options.isShouw
		// if(type == 'c'){

		// }
		fetchData();
		console.log(type + options.type)
		getDetailsDataFun(options.id);

	})


	onMounted(() => {


		if (type == 'b' || type == 'c') {
			fetchData();
			getDetailsDataFun(id);
		}

		// getDetailsDataFun(id); // 当 id 变化时，重新调用 getDetailsDataFun 方法
		// getDetailsDataFun()
		// getDetailsDataFun()


	});
</script>
<style>
	textarea {
		width: 98%;
	}
</style>
<style scoped lang="scss">
	// :deep(.checklist-box) {
	// 	//  模版
	// }
	// 效果
	.xgItemClass {
		padding: 0 12rpx;
		min-width: 119rpx;
		height: 49rpx;
		line-height: 49rpx;
		text-align: center;
	}

	.xgItemClassImagination {
		padding: 0 12rpx;
		min-width: 119rpx;
		color: rgb(128, 128, 128);
		height: 49rpx;
		background: rgb(219, 219, 219);
		line-height: 49rpx;
		text-align: center;
	}


	.xgItemOn {
		color: white;
		background-color: $ai-primary;
		border-color: $ai-primary;

		.border-d {
			border-color: white;
		}
	}

	.xgItemOnfgItemClass {
		color: white;
		background-color: $ai-primary;
		border-color: none;

		.border-d {
			border-color: white;
		}
	}

	// 风格
	.fgItemClass {
		background: none;
	}

	.fgXuanzhong {
		position: absolute;
		right: 16rpx;
		top: 16rpx;
		z-index: 1111;

	}
</style>